<!doctype html>
<html>
<head>
    <title>Socket.IO chat</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font: 13px Helvetica, Arial; }
        div { border: 1px solid rebeccapurple; padding: 3px; position: fixed; bottom: 0; width: 100%; }
        div input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
        div button { width: 9%; background: #bdbdbd; border: none; padding: 10px; }
        #messages { list-style-type: none; margin: 0; padding: 0; }
        #messages li { padding: 5px 10px; }
        #messages li:nth-child(odd) { background: #eee; }
        #d{
            border: 1px solid lawngreen;
            width: 100%;
        }
    </style>

</head>
<body>
<ul id="messages"></ul>
<div >
    <input id="d" autocomplete="off" />
    <input id="m" autocomplete="off" /><button onclick="send()">Send</button>

</div>
</body>
<script src="jquery.js"></script>
<script src="socket.io.js"></script>
<script>
         var socket = io();
         var id =null;
         socket.on("vip_receive", function(msg){
             console.log("id: "+JSON.stringify(msg));
             id = msg.id;
             $('#messages').append($('<li>').text(msg.msg))
             $('#messages').append($('<li>').text(msg.id))
         });
       function send() {
               //主动给服务器端发送信息
           console.log("id: "+id);
           id = $("#d").val();
            var data = {"msg":$('#m').val(),"id":id};
                socket.emit("vip", data);
               // $('#m').val('');
                 //服务器端给客户端推送信息

       }
</script>
</html>